// vue.config.js
const Visualizer = require('webpack-visualizer-plugin');
var mode = process.env.NODE_ENV;

var config = {
    configureWebpack: {
        externals: {
            vue: 'Vue',
            'vue-router': "VueRouter",
            vuex: 'Vuex',
            'konva': 'konva',
            'swiper': 'Swiper',
        },
        module: {
            rules: [
                {test: /\.html$/, use: "html-loader"},
            ]
        },
        resolve: {
            alias: {}
        },
        plugins: []
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('precss')(),
                    require('postcss-calc')(),
                    require('postcss-functions')({
                        functions: {
                            px2rem: function ($px, $fontSize) {
                                var $_fontSize = $fontSize || 100
                                return ($px / $_fontSize / 2) + "rem"
                            }
                        }
                    })
                ]
            }
        }
    }

}
if (mode == "development") {
    // config.configureWebpack.resolve.alias['vue$'] == 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
if (mode != "development") {
    config.configureWebpack.plugins.push(new Visualizer())
}

module.exports = config